<template>
  <div class="distribution-section">
    <h3>风速使用分布</h3>
    <div class="distribution-chart">
      <div class="chart-bar">
        <div class="bar-label">高风</div>
        <div class="bar-container">
          <div class="bar-fill high" :style="{ width: getPercentage(high) + '%' }">
            {{ high }}
          </div>
        </div>
      </div>
      <div class="chart-bar">
        <div class="bar-label">中风</div>
        <div class="bar-container">
          <div class="bar-fill medium" :style="{ width: getPercentage(medium) + '%' }">
            {{ medium }}
          </div>
        </div>
      </div>
      <div class="chart-bar">
        <div class="bar-label">低风</div>
        <div class="bar-container">
          <div class="bar-fill low" :style="{ width: getPercentage(low) + '%' }">
            {{ low }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';

const props = defineProps<{
  high: number;
  medium: number;
  low: number;
}>();

const total = computed(() => props.high + props.medium + props.low);

const getPercentage = (value: number): number => {
  return total.value > 0 ? (value / total.value) * 100 : 0;
};
</script>

<style scoped>
.distribution-section {
  padding: 24px;
  background: #f8fafc;
  border-radius: 12px;
  border: 2px solid #e0f2fe;
  margin-bottom: 24px;
}

h3 {
  margin: 0 0 16px 0;
  color: #334155;
  font-size: 16px;
  font-weight: 600;
}

.distribution-chart {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.chart-bar {
  display: flex;
  align-items: center;
  gap: 15px;
}

.bar-label {
  width: 60px;
  font-weight: bold;
  color: #333;
}

.bar-container {
  flex: 1;
  height: 30px;
  background: #e5e7eb;
  border-radius: 15px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  font-size: 12px;
  transition: width 0.5s ease;
  min-width: 30px;
}

.bar-fill.high {
  background: linear-gradient(90deg, #ef4444, #dc2626);
}

.bar-fill.medium {
  background: linear-gradient(90deg, #f59e0b, #d97706);
}

.bar-fill.low {
  background: linear-gradient(90deg, #3b82f6, #2563eb);
}
</style>

